import React, { Component } from 'react'
import moment from 'moment'
import { runInAction, toJS } from 'mobx'
import { observer, inject } from 'mobx-react'
import { Button, Form, Input, DatePicker, Select } from 'antd'


const { TextArea } = Input;
const FormItem = Form.Item
const Option = Select.Option

@Form.create()
@inject('articleCreate')
@observer
class FirstStepView extends Component {

	constructor(props) {
		super(props)
		console.log(this.props.articleCreate)
	}

	handleChange = (value, property) => {
		runInAction(() => {
			this.props.articleCreate.form[property] = value
		})
	}

	render() {

		const { getFieldDecorator } = this.props.form
		let  { articleTitle, articleCreateTime, articleCategory, articleDesc } = this.props.articleCreate.form

		const formItemLayout = {
			labelCol: {
				span: 2
			},
			wrapperCol: {
				span: 6
			}
		}

		return (
			<div>
				<Form>
	        <FormItem
	          {...formItemLayout}
	          label="文章标题"
	        >
	          {getFieldDecorator('articleTitle', {
	          	initialValue: articleTitle,
	            rules: [{
	              required: true, message: '请输入你的标题!',
	            }],
	          })(
	            <Input placeholder="文章标题" onChange={(e) => {this.handleChange(e.target.value, 'articleTitle')}}/>
	          )}
        	</FormItem>
        	<FormItem
	          {...formItemLayout}
	          label="创建时间"
	        >
	          {getFieldDecorator('articleCreateTime', {
	          	initialValue: moment(articleCreateTime, "YYYY-MM-DD HH:mm:ss"),
	            rules: [{
	              required: true, message: '请输入你的创建时间!',
	            }],
	          })(
	            <DatePicker
					      showTime
					      format="YYYY-MM-DD HH:mm:ss"
					      placeholder="选择日期"
					      onOk={(value) => {
					      	this.handleChange(moment(value).format('YYYY-MM-DD HH:mm:ss'), 'articleCreateTime')
					      }}
					    />
	          )}
        	</FormItem>
        	<FormItem
	          {...formItemLayout}
	          label="标签分类"
	        >
	          {getFieldDecorator('articleCategory', {
	          	initialValue: articleCategory,
	            rules: [{
	              required: true, message: '请选择你的标签分类!',
	            }],
	          })(
	            <Select
						    mode="multiple"
						    style={{ width: '100%' }}
						    placeholder="Please select"
						    onChange={(value) => {this.handleChange(value, 'articleCategory')}}
						  >
						    {
						    	this.props.articleCreate.categoryList.map((item, index) => {
							    	return <Option key={item}>{item}</Option>
							    })
						    }
						  </Select>
	          )}
        	</FormItem>
        	<FormItem
	          labelCol= {{span: 2}}
	          wrapperCol= {{span: 10}}
	          label="文章摘要"
	        >
	          {getFieldDecorator('articleDesc', {
	          	initialValue: articleDesc,
	            rules: [{
	              required: true, message: '请输入你的摘要!',
	            }],
	          })(
	            <TextArea rows={6} placeholder="文章摘要" onChange={(e) => {this.handleChange(e.target.value, 'articleDesc')}}></TextArea>
	          )}
        	</FormItem>
        </Form>
			</div>
		)
	}
}


export default FirstStepView